<template>
  <div class="bg-white rounded-lg shadow p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold">社区活动</h2>
      <button
        @click="showCreateForm = true"
        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors"
      >
        <i class="fas fa-plus mr-1"></i>发布活动
      </button>
    </div>

    <!-- 活动列表 -->
    <div class="space-y-6">
      <div
        v-for="event in events"
        :key="event.id"
        class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
      >
        <div class="md:flex">
          <!-- 活动封面图 -->
          <div class="md:w-1/3 h-48 md:h-auto">
            <img
              :src="event.coverImage"
              :alt="event.title"
              class="w-full h-full object-cover"
            >
          </div>

          <!-- 活动信息 -->
          <div class="md:w-2/3 p-4">
            <div class="flex justify-between items-start">
              <h3 class="text-lg font-bold">{{ event.title }}</h3>
              <span
                :class="{
                  'bg-green-100 text-green-800': event.status === '报名中',
                  'bg-yellow-100 text-yellow-800': event.status === '即将截止',
                  'bg-red-100 text-red-800': event.status === '已结束'
                }"
                class="px-2 py-1 rounded-full text-xs"
              >
                {{ event.status }}
              </span>
            </div>

            <p class="text-gray-600 mt-2">{{ event.description }}</p>

            <div class="grid grid-cols-2 gap-2 mt-4 text-sm">
              <div class="flex items-center text-gray-500">
                <i class="fas fa-calendar-day mr-2"></i>
                {{ formatDate(event.startTime) }} - {{ formatDate(event.endTime) }}
              </div>
              <div class="flex items-center text-gray-500">
                <i class="fas fa-map-marker-alt mr-2"></i>
                {{ event.location }}
              </div>
              <div class="flex items-center text-gray-500">
                <i class="fas fa-users mr-2"></i>
                报名人数: {{ event.currentParticipants }}/{{ event.maxParticipants }}
              </div>
              <div class="flex items-center text-gray-500">
                <i class="fas fa-user-tie mr-2"></i>
                主办方: {{ event.organizer }}
              </div>
            </div>

            <div class="mt-4 flex justify-between items-center">
              <span
                :class="{
                  'bg-blue-100 text-blue-800': event.type === '线上',
                  'bg-purple-100 text-purple-800': event.type === '线下'
                }"
                class="px-2 py-1 rounded-full text-xs"
              >
                {{ event.type }}活动
              </span>
              <button
                @click="showEventDetails(event)"
                class="text-blue-500 hover:text-blue-700 text-sm font-medium"
              >
                查看详情 <i class="fas fa-chevron-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 活动详情模态框 -->
    <div
      v-if="selectedEvent"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
      @click.self="selectedEvent = null"
    >
      <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="relative">
          <!-- 活动封面图 -->
          <img
            :src="selectedEvent.coverImage"
            :alt="selectedEvent.title"
            class="w-full h-48 object-cover"
          >
          <button
            @click="selectedEvent = null"
            class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"
          >
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="p-6">
          <div class="flex justify-between items-start mb-4">
            <h3 class="text-xl font-bold">{{ selectedEvent.title }}</h3>
            <span
              :class="{
                'bg-green-100 text-green-800': selectedEvent.status === '报名中',
                'bg-yellow-100 text-yellow-800': selectedEvent.status === '即将截止',
                'bg-red-100 text-red-800': selectedEvent.status === '已结束'
              }"
              class="px-3 py-1 rounded-full text-sm"
            >
              {{ selectedEvent.status }}
            </span>
          </div>

          <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
              <h4 class="text-sm font-medium text-gray-500">活动时间</h4>
              <p>{{ formatDateTime(selectedEvent.startTime) }} 至 {{ formatDateTime(selectedEvent.endTime) }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500">活动地点</h4>
              <p>{{ selectedEvent.location }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500">活动类型</h4>
              <p>{{ selectedEvent.type }}活动</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-500">主办方</h4>
              <p>{{ selectedEvent.organizer }}</p>
            </div>
          </div>

          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500">活动简介</h4>
            <p class="mt-1">{{ selectedEvent.description }}</p>
          </div>

          <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-500">活动详情</h4>
            <pre class="mt-1 whitespace-pre-wrap font-sans">{{ selectedEvent.content }}</pre>
          </div>

          <div class="flex justify-between items-center">
            <div>
              <h4 class="text-sm font-medium text-gray-500">报名情况</h4>
              <div class="flex items-center mt-1">
                <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
                  <div
                    class="bg-blue-500 h-2.5 rounded-full"
                    :style="{ width: `${(selectedEvent.currentParticipants / selectedEvent.maxParticipants) * 100}%` }"
                  ></div>
                </div>
                <span class="text-sm text-gray-500">
                  {{ selectedEvent.currentParticipants }}/{{ selectedEvent.maxParticipants }}人
                </span>
              </div>
            </div>
            <button
              v-if="selectedEvent.status !== '已结束'"
              class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors"
            >
              立即报名
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布活动表单模态框 -->
    <EventFormModal
      :visible="showCreateForm"
      :community-id="communityId"
      @close="showCreateForm = false"
      @submit="addNewEvent"
    />
  </div>
</template>



<script>
import { communityEvents } from '@/mock/communityEventsData';
import EventFormModal from './EventFormModal.vue';

export default {
  name: 'CommunityEvents',
  components: {
    EventFormModal
  },
  props: {
    communityId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      events: communityEvents,
      selectedEvent: null,
      showCreateForm: false
    };
  },
  methods: {
    showEventDetails(event) {
      this.selectedEvent = event;
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    formatDateTime(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    addNewEvent(event) {
      // 添加到活动列表
      this.events.unshift(event);
      alert('活动发布成功！');
    }
  }
};
</script>